<template>
    <div class="content banner-box">

    </div>
</template>
<script setup>
import { onMounted, ref, watch } from 'vue'
import { getLeftList } from '@/api/viewapi.js'
import { useRoute } from 'vue-router';
import { base64Img } from '@/tools/tools.js'
import router from '@/router/index.js'
const MaxData = ref([])
const ViewData = ref([])
const TopId = ref(0)
const route = useRoute();




const checViewData = (index) => {
    ViewData.value = MaxData.value[index].chanpin
    console.log(MaxData.value[index].chanpin);
}

const _getLeftList = () => {
    getLeftList().then((res) => {
        MaxData.value = res.data.data
        console.log('全部产品', res.data.data);
        checkIndexCheck()
    })
}

// 主动筛选
const checkIndexCheck = () => {
    let data = MaxData.value
    for (let index = 0; index < data.length; index++) {
        if (TopId.value == data[index].record_id) {
            ViewData.value = data[index].chanpin;
            console.log(ViewData.value);
        }
    }
}
// 主动筛选2 
const checkIndexCheck2 = (id) => {
    let data = MaxData.value
    for (let index = 0; index < data.length; index++) {
        if (id == data[index].record_id) {
            ViewData.value = data[index].chanpin;
            console.log(ViewData.value);
        }
    }
}

// 跳转产品
const gotoChanpin = (id) => {
    router.push({ path: '/chanpincontent', query: { id: id } })
}


watch(
    () => route.query,  // 监听 query 参数
    (newQuery, oldQuery) => {
        console.log('query 参数变化:', oldQuery, '->', newQuery)
        // 在 query 参数变化时执行的代码

        checkIndexCheck2(newQuery.id)
    },
    { deep: true }  // 使用 deep 选项来深度监听 query 对象
)

onMounted(() => {
    TopId.value = route.query.id
    _getLeftList()
})
</script>
<style lang="scss" scoped>
// 取消显示手机端 显示pc端
@media (min-width: 800px) {
   
}

// 取消显示pc端 显示手机端
@media screen and (max-width: 799px) {

    
}
</style>